<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>

<body>
    <div class="container" style="transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)">
        <div class="side1"></div>
        <div class="side2"></div>
        <div class="side3"></div>
        <div class="side4"></div>
        <div class="side5"></div>
        <div class="side6"></div>
    </div>
</body>


<script>
     const container = document.querySelector('.container');
    document.onmousedown = function (e) {
      const {clientX, clientY} = e;

      document.onmousemove = function (e) {
        const {clientX: x, clientY: y} = e;
        const dx = x - clientX;
        const dy = y - clientY;
        const rotateX = dy / 2;
        const rotateY = dx / 2;

        // 停止animation
        container.style.animation = 'none';

        const transform = getComputedStyle(container).transform;
        const matrix = transform.match(/matrix(3d)?\((.+)\)/)[2].split(',') || [];
        const matrixX = Number(matrix[8] || 0);
        const matrixY = Number(matrix[9] || 0);
        container.style.transform = `rotateX(${-(rotateX + matrixX)}deg) rotateY(${rotateY + matrixY}deg)`;
      }

      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null

        // 重新开始animation
        container.style.animation = 'rotate 10s linear infinite';
      }
    }


    document.querySelector('.side1').addEventListener('click', (e) => {
      const light = document.querySelector('.light');
      light && light.classList.remove('light');
      e.target.classList.add('light');
      container.style.transform = 'rotateX(360deg) rotateY(360deg)';
      container.style.animation = 'none';
    })
    document.querySelector('.side2').addEventListener('click', (e) => {
      const light = document.querySelector('.light');
      light && light.classList.remove('light');
      e.target.classList.add('light');
      container.style.transform = 'rotateX(0deg) rotateY(180deg)';
      container.style.animation = 'none';
    })
    document.querySelector('.side3').addEventListener('click', (e) => {
      const light = document.querySelector('.light');
      light && light.classList.remove('light');
      e.target.classList.add('light');
      container.style.transform = 'rotateX(270deg) rotateY(0deg)';
      container.style.animation = 'none';
    })
    document.querySelector('.side4').addEventListener('click', (e) => {
      const light = document.querySelector('.light');
      light && light.classList.remove('light');
      e.target.classList.add('light');
      container.style.transform = 'rotateX(90deg) rotateY(180deg)';
      container.style.animation = 'none';
    })
    document.querySelector('.side5').addEventListener('click', (e) => {
      const light = document.querySelector('.light');
      light && light.classList.remove('light');
      e.target.classList.add('light');
      container.style.transform = 'rotateX(0) rotateY(90deg)';
      container.style.animation = 'none';
    })
    document.querySelector('.side6').addEventListener('click', (e) => {
      const light = document.querySelector('.light');
      light && light.classList.remove('light');
      e.target.classList.add('light');
      container.style.transform = 'rotateX(0deg) rotateY(270deg)';
      container.style.animation = 'none';
    })
</script>
</html>